<template>
  <div class="user">
    <div class="banner_tab">
      <!-- // gkzx是广州  qy是北京 Cookies.get('gsign')-->
      <a :href="'https://m.oucgz.cn/web/professionalListNew?gsign=' + gsign"  class="step_list">
        <div class="text_span"><span>现在去报读</span></div>
        <img src="../../../assets/img/modules/psersonal/user_7.png" alt="">
      </a>
      <div class="user_body">
        <div class="_name">
          <img :src="avatar" alt=""> <span>{{name}}</span>
        </div>
        <p class="discipline">{{discipline}}</p>
      </div>
    </div>
    <div class="tab_list">
<!--      https://m.oucgz.cn/web/home?gsign='+ gsign +'&identity=student'-->
      <a href="javascript:;" class="tab_item" @click="$toast('暂未开放')">
        <img src="../../../assets/img/modules/psersonal/uer_0719_5.png" alt="" style="width: 0.68rem">
        <strong>0元课程</strong>
        <p>学历报读避坑指南</p>
      </a>
      <a href="/personal-refund" class="tab_item">
        <img src="../../../assets/img/modules/psersonal/user_5.png" alt=""  style="width: 0.82rem">
        <strong>7天无理由退费</strong>
        <p>缴费7天内无理由全额退费</p>
      </a>
    </div>
    <div class="tab_list">
      <a href="https://webchat.7moor.com/wapchat.html?accessId=023462d0-8040-11e8-9c33-012cab216043" class="tab_item">
        <img src="../../../assets/img/modules/psersonal/user_3.png" alt="" style="width: 0.68rem">
        <strong>1对1免费咨询</strong>
        <p>学历报读避坑指南</p>
      </a>
      <a :href="'/subsidy-login?gsign='+ gsign" class="tab_item">
        <img src="../../../assets/img/modules/psersonal/user_9.png" alt="" style="width: 0.84rem">
        <strong>最高4000元补贴</strong>
        <p>各级工会补贴轻松申请</p>
      </a>
    </div>
    <div class="tab_list">
      <a href="http://xfyjsdy.h5new.gdzgjy.com/index.php?s=html&id=427&center_code=GKGZSYXYLWXXZX&support=share&from=singlemessage" class="tab_item">
        <img src="../../../assets/img/modules/psersonal/uer_0719_4.png" alt="" style="width: 0.74rem">
        <strong>学付易</strong>
        <p>首付800元读大学</p>
      </a>
      <a :href="'/personal-coupon?phone=' + userData.phone" class="tab_item">
        <img src="../../../assets/img/modules/psersonal/user_29.png" alt="" style="width: 0.68rem">
        <strong>我的卡包</strong>
      </a>
    </div>
<!--    <a href="javascript:;" class="out_btn" @click="outPersonal">退出登录</a>-->
  </div>
</template>
<script>
export default {
  name: 'user',
  components: {},
  data () {
    return {
      status2Text: '在读中',
      status: 3, // 状态1 已毕业 2 在读中 3完善资料(2部分支付，3交易成功) 4去缴费 5去报读(0是没有订单)
      text_alt: '已毕业',
      name: '',
      gsign: this.$store.state.gsign,
      discipline: '',
      number: '',
      avatar: '',
      userData: null
    }
  },
  props: {},
  watch: {},
  methods: {
    /*
     *@author wf_Huang
     *@Time 2019/7/19 0019 8:56
     *@function  退出登录
     *****************************************/
    outPersonal () {
      // this.$store.state.commit('personal')
      this.$router.push({ path: '/personal-authorize' })
    },
    /*
     *@author wf_Huang
     *@Time 2019/7/17 0017 17:54
     *@function  判断是是否有用户信息 显示状态
     *****************************************/
    isUserData () {
      if (this.userData) {
        this.name = this.userData.name
        this.discipline = this.userData.major
        this.number = this.userData.studentNo
        this.avatar = this.userData.avatar
      }
    }
  },
  computed: {},
  created () {
  },
  mounted () {
    document.querySelector('body').setAttribute('style', 'background-color:#F6F6F6')
    this.userData = this.$store.state.personal.userData
    this.isUserData()
  },
  destroyed () {
    document.querySelector('body').removeAttribute('style')
  }
}
</script>
<style lang="scss" scoped>
  html,body{
    height: 100%;
  }
  .user {
    background-color: #F6F6F6;
    height: auto;
    padding: 32px;
    margin: 0 auto;
    max-width: 750px;
    .banner_tab{
      background: url("../../../assets/img/modules/psersonal/uer_0719_3.png") no-repeat center;
      background-size: 100%;
      width: 686px;
      height: 352px;
      box-shadow: 0 10px 30px rgba(0,0,0,0.2);
      border-radius: 30px;
      position: relative;
      margin-bottom: 30px;
      .step_list{
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        height: 100px;
        z-index: 9;
        padding: 0 40px;
        background-color: #FBE6E6;
        display: flex;
        justify-content: space-between;
        align-content: center;
        align-items: center;
        border-bottom-left-radius: 30px;
        border-bottom-right-radius: 30px;
        .text_span{
          display: flex;
          align-content: center;
          align-items: center;
          span{
            font-size: 32px;
            color: #C7161D;
          }
        }
        img{
          width: 46px;
          height: 46px;
        }
      }
      .right_alt_img{
        position: absolute;
        right: -20px;
        top: 55px;
        background: url("../../../assets/img/modules/psersonal/user_33.png") no-repeat center;
        background-size: 100% auto;
        width: 210px;
        height: 79px;
        font-family: PingFangSC-Regular;
        font-size: 28px;
        color: #DDE94D;
        letter-spacing: 0;
        text-align: center;
        display: flex;
        justify-content: center;
        align-items: center;
        padding-bottom: 6px;
        img{
          height: 0.3rem;
          width: auto;
          margin-right: 15px;
        }
      }
    }
    .user_body{
      padding: 65px 40px 0px;
      line-height: 58px;
      font-family: PingFangSC-Regular;
      font-size: 40px;
      color: #FFFFFF;
      letter-spacing: 0;
      img{
        width: 58px;
        height: 58px;
        border-radius: 100px;
        float: left;
        margin-right: 20px;
      }
    }
    .discipline{
      font-size: 28px;
      color: #FFFFFF;
      letter-spacing: 0;
      text-align: left;
      line-height: 28px;
      margin: 40px 0;
    }
    .number{
      font-size: 28px;
      color: #DDE94D;
      letter-spacing: 0;
      text-align: left;
      line-height: 28px;
      position: absolute;
      bottom: 10px;
    }
    .tab_list{
      display: flex;
      justify-content: space-between;
      margin-bottom: 30px;
      .tab_item{
        text-align: center;
        background: #FFFFFF;
        box-shadow: 0 10px 20px 0 rgba(51,51,51,0.10);
        border-radius: 10px;
        width: 328px;
        height: 230px;
        padding: 100px 0 0;
        position: relative;
        display: flex;
        flex-direction: column;
        justify-content: center;
        img{
          height: auto;
          position: absolute;
          top: 80px;
          left: 50%;
          transform: translate(-50%, -50%);
        }
        strong{
          font-family: 'Microsoft YaHei UI Light';
          font-size: 32px;
          color: #333333;
          letter-spacing: 0;
          text-align: center;
        }
        p{
          font-size: 24px;
          color: #666666;
          letter-spacing: 0;
          text-align: center;
          line-height: 24px;
          margin: 10px 0 0 0;
        }
      }
    }
    .out_btn{
      border: 1px solid #C7161D;
      border-radius: 10px;
      color: #C7161D;
      line-height: 88px;
      font-size: 32px;
      letter-spacing: 0;
      text-align: center;
      display: block;
      margin: 100px 0 50px;
    }
  }
</style>
